<template>
  <div class="home" :class="{ active: show }">
    <!-- 导航栏 -->
    <div class="nav" ref="header">
      <apple-nav>
        <slot>苹果音乐</slot>
      </apple-nav>
    </div>

    <!-- 标签页 -->
    <div class="tab" :class="{ isFixed: fixed }">
      <div
        :class="{ active: activeIndex == index }"
        class="tabitem"
        v-for="(item, index) in tabList"
        :key="index"
        @click="toggle(index)"
      >
        <div class="tan">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>

    <!-- 推荐音乐 -->
    <div v-if="activeIndex == 0">
      <recommend-list
        :personalist="personalist"
        :musicList="musicList"
        @musicMessage="musicMessage"
      ></recommend-list>
    </div>
    <div v-if="activeIndex == 1">
      <hotMusic @musicMessage="musicMessage" />
    </div>
    <div v-if="activeIndex == 2">
      <search />
    </div>

    <!-- 播放器 -->
    <div class="play" v-if="show">
      <applePlay :message="message" @noshow="noshow"></applePlay>
    </div>
  </div>
</template>

<script>
import appleNav from "../components/home/appleNav";
import recommendList from "../components/home/recommend.vue";
import applePlay from "../components/home/applePlay";
import search from "../components/home/search.vue";
import hotMusic from "../components/home/hotMusic";
import { personalized, newsong } from "../api/home/home";
export default {
  name: "Home",
  components: {
    appleNav,
    applePlay,
    hotMusic,
    search,
    recommendList,
  },
  data() {
    return {
      tabList: [{ title: "推荐歌单" }, { title: "热歌榜" }, { title: "搜索" }],
      activeIndex: 0, //标签页索引值
      personalist: [], //推荐数据
      loading: true,
      musicList: [], //最新音乐数据
      fixed: false, //是否固定
      show: false, //是否显示播放器
      message: {}, //歌曲信息
    };
  },
  mounted() {
    // 推荐
    personalized({ limit: 6 }).then((res) => {
      if (res.status == 200) {
        this.personalist = res.data.result;
        this.loading = false;
      }
    });

    // 最新音乐
    newsong().then((res) => {
      if ((res.status = 200)) {
        this.musicList = res.data.result;
        this.loading = false;
      }
    });
    this.scrollEvent();
  },
  methods: {
    // 切换导航栏
    toggle(num) {
      if (this.activeIndex == num) return;
      this.activeIndex = num;
    },
    scrollEvent() {
      window.addEventListener("scroll", () => {
        let ttop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (this.$refs.header) {
          //获取header标签高度
          let height = this.$refs.header.offsetHeight;
          if (ttop > height) {
            this.fixed = true;
          } else {
            this.fixed = false;
          }
        }
      });
    },
    musicMessage(data) {
      console.log(data);
      this.show = true;
      this.message = data;
    },
    noshow() {
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .nav {
    height: 54px;
  }
  .load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  .isFixed {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
  }
  .tab {
    display: flex;
    background: white;
    height: 50px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    .tabitem {
      flex: 1;
      height: 50px;
      line-height: 50px;
      .tan {
        position: relative;
        display: inline-block;
        padding: 0 5px;
      }
      span {
        display: inline-block;
      }
    }
    .tabitem.active {
      color: red;
      span::after {
        content: "";
        width: 100%;
        height: 2px;
        background: red;
        display: block;
        position: absolute;
        bottom: -1px;
        left: 0;
      }
    }
  }
}
.active {
  padding-bottom: 60px;
}
</style>
